<template>
    <div style="width:100%">
        <div style="display:flex;justify-content: space-between;margin-bottom:20px;">
            <div>监听器</div>
            <i class="icon zbs-plus-circle" @click="addWatch"></i>
        </div>
        <div class="watch-item-box" v-for="(item, index) in modelValue" :key="index">
            <div style="display:flex;justify-content: space-between;padding:0 10px">
                <div>key:</div>
                <el-input v-model="item.key" style="width:80%;" size="small"></el-input>
                <i class="icon zbs-cross" @click="removeWatch(index)"></i>
            </div>
            <code-edit v-model="item.function" :style="{width:'100%',height:'80px'}"></code-edit>
        </div>
    </div>
</template>
<script setup>
import {defineProps,defineEmits} from 'vue'
const emit = defineEmits(["update:modelValue"]);
const prop = defineProps({
    modelValue:{
        type:Array,
        default: () => {
            return []
        },
    }
})
const addWatch = () => {
    prop.modelValue.push({key:"",function:
    `function(){\n`+
    `}`})
    emit('update:modelValue',prop.modelValue)
}
const removeWatch = (index) => {
    prop.modelValue.splice(index,1)
    emit('update:modelValue',prop.modelValue)
}
</script>
<style scoped>
.watch-item-box{
    padding:10px;
    border-radius: 4px;
    background-color: white;
    margin-bottom: 24px;
}
</style>